import { IRouteComponentProps } from 'umi';
import React from 'react';

import ParticlesBg from 'particles-bg';
// @ts-ignore
import styled from 'styled-components';

import IconFont from '@/components/iconFont';
import NaviBar from '@/components/naviBar';

import styles from './index.less';

export default function Layout({
  children,
  location,
  route,
  history,
  match,
}: IRouteComponentProps) {
  if (location.pathname.match('/post')) {
    return (
      <main className={styles.background}>
        <div className={styles.bg}>
          <ParticlesBg type={'ball'} />
        </div>
        <Header
          height={'20rem'}
          bg={
            'https://cos-1256179601.cos.ap-guangzhou.myqcloud.com/blog/3bbdcce9d64fbff57c1dcbd6b18019bd39688a94.jpg%401320w_1408h.webp'
          }
        >
          <NaviBar />
        </Header>
        <div className={styles.main}>{children}</div>
        <footer className={styles.footer}>
          <div className={styles.footer_wraper}>
            <div>©2018 - 2020 By Tian</div>
            <div>
              <IconFont use={'ngcICPbeian'} />
              <span> 湘ICP备19027880号</span>
            </div>
          </div>
        </footer>
      </main>
    );
  }
  return (
    <main className={styles.background}>
      <div className={styles.bg}>
        <ParticlesBg type={'ball'} />
      </div>
      <Header
        height={'100vh'}
        bg={
          'https://cos-1256179601.cos.ap-guangzhou.myqcloud.com/blog/3bbdcce9d64fbff57c1dcbd6b18019bd39688a94.jpg%401320w_1408h.webp'
        }
      >
        <NaviBar />
        <div className={styles.site_info}>
          <h1 className={styles.site_title}>NGC5189</h1>
        </div>
      </Header>
      <div className={styles.main}>{children}</div>
      <footer className={styles.footer}>
        <div className={styles.footer_wraper}>
          <div>©2018 - 2020 By Tian</div>
          <div>
            <IconFont use={'ngcICPbeian'} />
            <span> 湘ICP备19027880号</span>
          </div>
        </div>
      </footer>
    </main>
  );
}

const Header = styled.header`
  height: ${(props: { height: string }) => props.height};
  width: 100%;
  background-image: url(${(props: { bg: any }) => props.bg});
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  background-color: #49b1f5;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-animation: header-effect 1s;
  -moz-animation: header-effect 1s;
  -o-animation: header-effect 1s;
  -ms-animation: header-effect 1s;
  animation: header-effect 1s;
`;
